<template>
  <div class="tab-title-page">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" style="width:220px" placeholder="请输入订单号" clearable />
        </el-form-item>
        <el-form-item label="资金流向">
          <el-select v-model="searchForm.moneyFlow" placeholder="请选择" clearable>
            <el-option label="收入" :value="1" />
            <el-option label="支出" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="searchForm.flowType" placeholder="请选择" clearable>
            <el-option v-for="item in typeList" :key="item.id" :label="item.label" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="入账时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="search_total">
        <div class="flex data_grid">
          <p class="flex-1"><span class="color-999">供应商总金额（元）</span><br><span>{{amount}}</span></p>
          <p class="flex-1"><span class="color-999">手续费总额（元）</span><br><span>{{service_fee}}</span></p>
          <p class="flex-1"><span class="color-999">提现总额（元）</span><br><span>{{withdrawal}}</span></p>
          <p class="flex-1"><span class="color-999">充值总额（元）</span><br><span>{{charge}}</span></p>
        </div>
        <p class="color-999 text-center">查询时间：{{searchForm.createTime?searchForm.createTime:'全部'}}</p>
      </div>
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
        </h5>
        <el-button v-if="$hasMethod('#export')" size="small" icon="el-icon-upload2" class="export-btn" @click="exportFile">导出</el-button>
      </div>
      <el-table border :data="tableData">
        <el-table-column fixed width="60" align="center" prop="trans_id" label="ID" />
        <el-table-column align="center" label="账户类型" width="80">
          <span>租金账户</span>
        </el-table-column>
        <el-table-column align="center" prop="before_balance" label="交易前余额（元）" />
        <el-table-column align="center" label="手续费金额（元）">
          <template slot-scope="scope">
            <span @click="openFeeDialog(scope.row)" :class="{'underline_text':scope.row.service_fee>0,'pointer':scope.row.service_fee>0}">{{scope.row.service_fee?scope.row.service_fee:'--'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="金额（元）">
          <template slot-scope="scope">
            <span v-if="scope.row.amount>0" class="green-font">+{{scope.row.amount}}</span>
            <span v-else class="red-font">{{scope.row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="after_balance" label="交易后余额（元）" />
        <el-table-column align="center" label="类型" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.trans_type_name}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="create_time" label="入账时间" width="100" />
        <el-table-column align="center" label="订单号">
          <template slot-scope="scope">
            <span class="blue-font pointer" @click="goToOrder(scope.row.trade_no)">{{scope.row.trade_no}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remarks" label="交易说明" />
      </el-table>
      <custom-page ref="customPage" :total="total" @getList="getList" />
    </div>
    <fee-dialog ref="feeDialog" :view-item="viewItem" />
  </div>
</template>

<script>
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import { reconciliationFlow, reconciliationExport } from '@/api/finance'
import feeDialog from './feeDialog'
export default {
  components: { customPage, myDatePicker, feeDialog },
  data() {
    return {
      searchForm: {
        orderNo: '',
        moneyFlow: '',
        flowType: '',
        createTime: ''
      },
      typeList: [
        { id: 1, label: '结算' },
        { id: 2, label: '退款' },
        { id: 3, label: '充值' },
        { id: 4, label: '买断结算' },
        { id: 6, label: '提现' },
        { id: 7, label: '增值服务业务充值' }
      ],
      tableData: [],
      total: 0,
      amount: 0,
      service_fee: 0,
      withdrawal: 0,
      charge: 0,
      viewItem: {}
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    openFeeDialog(item) {
      if (item.service_fee > 0) {
        this.viewItem = item
        this.$refs.feeDialog.dialogVisible = true
      }
    },
    goToOrder(orderId) {
      if (orderId) {
        this.$router.push({ name: 'orderList', params: { orderId }})
      }
    },
    getTypeName(id) {
      const obj = this.typeList.find(k => k.id === id)
      return obj ? obj.label : ''
    },
    // 获取数据
    getList() {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      reconciliationFlow({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        const { list: { data, total }, count: { amount, service_fee, withdrawal, charge } } = res
        this.tableData = data || []
        this.total = total || 0
        this.amount = parseFloat(amount) ? parseFloat(amount).toFixed(2) : '0.00'
        this.service_fee = parseFloat(service_fee) ? parseFloat(service_fee).toFixed(2) : '0.00'
        this.withdrawal = parseFloat(withdrawal).toFixed(2) || 0
        this.charge = parseFloat(charge).toFixed(2) || 0
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.createTime = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        orderNo: '',
        moneyFlow: '',
        flowType: '',
        createTime: ''
      }
      this.getList()
    },
    // 导出
    exportFile() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.createTime = pickerVal
        reconciliationExport(this.searchForm)
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.search_total {
  padding: 0 30px;
  border: 1px solid #eeeeee;
  margin-bottom: 20px;

  p,
  span {
    line-height: 23px;
  }

  &>p {
    padding: 10px 0;
  }
}

.data_grid {
  border-bottom: 1px solid #eeeeee;

  p {
    padding: 20px 0;
    text-align: center;

    &:not(:first-child) {
      border-left: 1px solid #eeeeee;
    }

    span:last-child {
      font-size: 30px;
      line-height: 40px;
    }
  }
}

.underline_text {
  text-decoration: underline;
}

.common_form_search {
  padding: 15px 15px 0 15px;
  border-radius: 0 0 10px 10px;
  background-color: #ffffff;
}

.child_page {
  padding: 15px;
}
</style>
